.weather-selector{
  @include border-radius($radius-mobile);
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  padding: 15px;
  background-color: white;
  border-bottom: 1px solid $bg-light;
  .weather{
    @include border-radius(50px);
    @extend .unselectable;
    padding: 7px;
    display: block;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    &:hover{
      background-color: $bg-light;
    }
    img{
      @extend .unselectable;
      margin: 0 auto;
      height: 30px;
      width: 30px;
      display: block;
    }
  }
}



// max
@media (min-width: $grid-separate-width-big){
  .weather-selector {
    @include border-radius($radius-pc);
    .weather{
    }
  }
}

// md
@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .weather-selector {
    @include border-radius($radius-pc);
    .weather{
    }
  }
}

// sm
@media (max-width: $grid-separate-width-md) {

}
